<template>
	<div class="workbench-container">
		<div class="notice-bar">
			<div class="notice-bar-label"><span class="el-icon-bell item-gap"></span>通知：</div>
			<marquee style="color: #ed4014;width: 100%;" class="el-icon-">{{ noticeTxt || '' }}️</marquee>
		</div>
		<el-row :gutter="16">
			<el-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
				<div class="head-box-item">
					<div class="workbench-card-item-title">
						<div class="flex-start-center">
							<span class="workbench-card-item-title-icon el-icon-user"></span>
							<span>用户信息</span>
						</div>
					</div>
					<div class="head-item-content">
						<div class="head-item-content-user-msg-bar">
							<el-avatar shape="square" :size="90" icon="el-icon-user-solid" style="font-size: 52px;"></el-avatar>
							<div class="head-item-content-user-msg">
								<div class="head-item-content-user-msg-name">
									<span>{{ empInfo.name || '暂无' }}</span>
									<div
										:class="[
											'head-item-content-user-msg-sex',
											empInfo.gender ? 'male' : 'female',
										]"
									>
										<span :class="empInfo.gender ? 'el-icon-male' : 'el-icon-female'"></span>
									</div>
								</div>
								<div class="head-item-content-user-msg-schedule">{{ empInfo.postName || '暂无岗位' }}</div>
								<div class="head-item-content-user-msg-dept">{{ empInfo.workshopName || '暂无区域' }}</div>
							</div>
						</div>
					</div>
				</div>
			</el-col>
			<el-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
				<div class="head-box-item">
					<div class="workbench-card-item-title">
						<div class="flex-start-center">
							<span class="workbench-card-item-title-icon el-icon-s-data"></span>
							<span>今日数据</span>
							<span style="font-size: 12px;color: #808695;margin-left: 14px;">更新时间：{{ currentTime }}</span>
						</div>
						<div>
							<el-dropdown @command="onProcessDropdownChange">
								<span class="el-dropdown-link">
									{{ searchParams.processName || '工序' }}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item
										v-for="processItem in processList"
										:key="processItem.code"
										:command="processItem.code"
									>{{ processItem.name }}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div class="head-item-content">
						<el-row style="height: 100%;">
							<el-col :span="6" class="head-item-content-item">
								<span class="head-item-content-item-title">在产品种(个)</span>
								<div class="head-item-content-item-today-val-bar">
									<span class="head-item-content-item-today-unit"></span>
									<div class="head-item-content-item-today-val">
										<countTo :start-val="0" :end-val="todayData.todayProductNum || 0" :duration="800"></countTo>
									</div>
								</div>
								<div class="head-item-content-item-history-bar">
									<span class="head-item-content-item-history-bar-label">昨天</span>
									<div class="head-item-content-item-history-bar-val">
										<countTo :start-val="0" :end-val="todayData.yesterdayProductNum || 0" :duration="800"></countTo>
									</div>
								</div>
							</el-col>
							<el-col :span="6" class="head-item-content-item">
								<span class="head-item-content-item-title">当班产量(kg)</span>
								<div class="head-item-content-item-today-val-bar">
									<span class="head-item-content-item-today-unit"></span>
									<div class="head-item-content-item-today-val">
										<countTo :start-val="0" :decimals="1" :end-val="todayData.todayQty || 0" :duration="800"></countTo>
									</div>
								</div>
								<div class="head-item-content-item-history-bar">
									<span class="head-item-content-item-history-bar-label">昨天</span>
									<div class="head-item-content-item-history-bar-val">
										<countTo :start-val="0" :decimals="1" :end-val="todayData.yesterdayQty || 0" :duration="800"></countTo>
									</div>
								</div>
							</el-col>
							<el-col :span="6" class="head-item-content-item">
								<span class="head-item-content-item-title">当班能耗(kw·h)</span>
								<div class="head-item-content-item-today-val-bar">
									<span class="head-item-content-item-today-unit"></span>
									<div class="head-item-content-item-today-val">
										<countTo :start-val="0" :decimals="1" :end-val="todayData.todayElectricEnergy || 0" :duration="800"></countTo>
									</div>
								</div>
								<div class="head-item-content-item-history-bar">
									<span class="head-item-content-item-history-bar-label">昨天</span>
									<div class="head-item-content-item-history-bar-val">
										<countTo :start-val="0" :decimals="1" :end-val="todayData.yesterdayElectricEnergy || 0" :duration="800"></countTo>
									</div>
								</div>
							</el-col>
							<el-col :span="6" class="head-item-content-item">
								<span class="head-item-content-item-title">排产机台(台)</span>
								<div class="head-item-content-item-today-val-bar">
									<span class="head-item-content-item-today-unit"></span>
									<div class="head-item-content-item-today-val">
										<countTo :start-val="0" :end-val="todayData.todayMachineNum || 0" :duration="800"></countTo>
									</div>
								</div>
								<div class="head-item-content-item-history-bar">
									<span class="head-item-content-item-history-bar-label">昨天</span>
									<div class="head-item-content-item-history-bar-val">
										<countTo :start-val="0" :end-val="todayData.yesterdayMachineNum || 0" :duration="800"></countTo>
									</div>
								</div>
							</el-col>
							<!--<el-col :span="6" class="head-item-content-item">
								<span class="head-item-content-item-title">当班人数</span>
								<div class="head-item-content-item-today-val-bar">
									<span class="head-item-content-item-today-unit"></span>
									<div class="head-item-content-item-today-val">
										<countTo :start-val="0" :end-val="todayData.toDayEmpNum || 0" :duration="800"></countTo>
									</div>
								</div>
								<div class="head-item-content-item-history-bar">
									<span class="head-item-content-item-history-bar-label">昨天</span>
									<div class="head-item-content-item-history-bar-val">
										<countTo :start-val="0" :end-val="todayData.yesterdayEmpNum || 0" :duration="800"></countTo>
									</div>
								</div>
							</el-col>-->
						</el-row>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="16" class="workbench-article-box">
			<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24" class="workbench-article-box-out-item" style="height: calc(40% - 16px)">
				<div class="second-row-inner-item">
					<div class="workbench-card-item-title">
						<div class="flex-start-center">
							<span class="workbench-card-item-title-icon el-icon-collection-tag"></span>
							<span>待办事项</span>
						</div>
						<!--<span class="el-icon-set-up set-shortcut-keys-icon" @click="onSetShortcutKeysBtn"></span>-->
					</div>
					<div class="second-row-item-content">
						<el-row :gutter="10" style="height: 100%;overflow: auto;">
							<el-col
								v-for="(item, index) in toDoList"
								:key="index"
								:xl="6"
								:lg="8"
								:md="8"
								:sm="8"
								:xs="12"
								style="height: 50%;padding-top: 4px;padding-bottom: 4px;"
							>
								<toDoItem :item="item"></toDoItem>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24" class="workbench-article-box-out-item" style="height: calc(40% - 16px)">
				<div class="second-row-inner-item">
					<div class="workbench-card-item-title">
						<div class="flex-start-center">
							<span class="workbench-card-item-title-icon el-icon-menu"></span>
							<span>快捷入口</span>
						</div>
						<el-popover
							placement="top-start"
							title="提示"
							trigger="hover"
							content="点击右侧图标可个性化定义入口"
						>
							<span slot="reference" class="el-icon-set-up set-shortcut-keys-icon" @click="onSetShortcutKeysBtn"></span>
						</el-popover>
					</div>
					<div class="second-row-item-content">
						<el-row :gutter="10" style="height: 100%;overflow: auto;">
							<el-col
								v-for="(item, index) in shortList"
								:key="index"
								:xl="4"
								:lg="6"
								:md="6"
								:sm="8"
								:xs="12"
								style="height: 50%;min-height: 70px;"
							>
								<shortcutsItem :item="item"></shortcutsItem>
							</el-col>
						</el-row>
					</div>
				</div>
			</el-col>
			<el-col :xl="14" :lg="14" :md="14" :sm="24" :xs="24" class="workbench-article-box-out-item" style="height: calc(60% - 16px)">
				<div class="second-row-inner-item">
					<div class="workbench-card-item-title">
						<div class="flex-start-center">
							<span class="workbench-card-item-title-icon el-icon-data-line"></span>
							<span>{{ searchParams.processName || '工序' }}报工产量趋势</span>
						</div>
						<div>
							<el-dropdown class="margin-right-10" @command="onWorkshopDropdownChange">
								<span class="el-dropdown-link">
									{{ searchParams.workshopName || '暂无区域' }}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item
										v-for="processItem in workshopList"
										:key="processItem.id"
										:command="processItem.id"
									>{{ processItem.name }}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
							<el-dropdown @command="onProcessDropdownChange">
								<span class="el-dropdown-link">
									{{ searchParams.processName || '暂无工序' }}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item
										v-for="processItem in processList"
										:key="processItem.code"
										:command="processItem.code"
									>{{ processItem.name }}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div class="second-row-item-content">
						<processYieldChart :chart-param="chartParam" :search-params="searchParams"></processYieldChart>
					</div>
				</div>
			</el-col>
			<el-col :xl="10" :lg="10" :md="10" :sm="24" :xs="24" class="workbench-article-box-out-item" style="height: calc(60% - 16px)">
				<div class="second-row-inner-item">
					<div class="workbench-card-item-title">
						<div class="flex-start-center">
							<span class="workbench-card-item-title-icon el-icon-bell"></span>
							<span>通知公告</span>
						</div>
					</div>
					<div class="second-row-item-content">
						<div
							v-for="(item, index) in noticeList"
							:key="index"
							class="notice-item"
							@click="onSeeNoticeItemBtn(item)"
						>
							<div class="flex-start-center">
								<div class="notice-item-circle"></div>
								<div class="notice-item-title">【{{ noticeTypeList.find(x => x.id === item.type) ? noticeTypeList.find(x => x.id === item.type).name : '' }}】{{ item.title }}</div>
							</div>
							<div class="notice-item-time">{{ item.failureTime }}</div>
						</div>
					</div>
				</div>
			</el-col>
		</el-row>
		<custom-shortcut-dialog
			:existing-data="shortList"
			:dialog-state="customShortcutDialogState"
			@on-confirm="onConfirmBtnOfCustomShortcutDialog"
			@on-visible-change="onVisibleChangeOfCustomShortcutDialog"
		></custom-shortcut-dialog>
		<notice-item-detail-dialog
			:dialog-state="noticeItemDetailDialogState"
			:data-id="dataId"
			@on-visible-change="onVisibleChangeOfNoticeItemDetailDialog"
			@on-confirm="onConfirmOfNoticeItemDetailDialog"
		></notice-item-detail-dialog>
	</div>
</template>

<script>
    import processYieldChart from './components/charts/process-yield-chart';
    import { formatTime } from '../../utils/jk/jk-tool';
    import countTo from 'vue-count-to';
    import customShortcutDialog from './components/custom-shortcut-dialog';
    import { mapState } from 'vuex';
    import { systemNoticeShow } from '../../api/system/notice';
    import { noticeTypeList } from '../../utils/jk/status-option-list';
    import noticeItemDetailDialog from './notice-item-detail-dialog';
    import toDoItem from './components/toDoItem/index';
    import { productionPrdOrderGetStateCount } from '../../api/production/order';
    import { mathJsAdd } from '../../utils/jk/jk-cals';
    import { productionPrdNoticeGetStateCount, spinSpecSheetTaskPage } from '../../api/production/xsNotice';
    import { productionPrdNoticeMachineChangeGetStateCount } from '../../api/production/xsRenovateOrder';
    import { systemAuthGetCustomMenu } from '../../api/menu';
    import shortcutsItem from './components/shortcutsItem/index';
    import { stagingGetBelongData } from '../../api/production/kanBan';
    import { productionTechnologySettingsGetStateCount } from '../../api/technology/technologySet';
    export default {
        name: 'Index',
        components: {
            shortcutsItem,
            customShortcutDialog,
            countTo,
            processYieldChart,
            noticeItemDetailDialog,
            toDoItem
        },
        computed: {
            ...mapState({
                empInfo: (state) => state.user.empInfo,
                userWorkshop: (state) => state.user.userWorkshop,
                userProcess: (state) => state.user.userProcess
            })
        },
        data() {
            return {
                searchParams: {
                    workshopId: null,
                    processCode: '',
                    processName: ''
                },
                processList: [],
                workshopList: [],
                dataId: null,
                noticeItemDetailDialogState: false,
                noticeTypeList: noticeTypeList,
                noticeTxt: '',
                chartParam: {},
                customShortcutDialogState: false,
                noticeList: [],
                currentTime: '',
                // 待办事项
                toDoList: [
                    { id: 1, name: '待处理订单', count: 0, correlationMenuName: 'prdOrder', icon: 'el-icon-s-order', bgColor: 'rgb(169, 124, 246)' },
                    { id: 2, name: '待处理通知单', count: 0, correlationMenuName: 'productionNoticeOrder', icon: 'el-icon-tickets', bgColor: 'rgb(75, 193, 18)' },
                    { id: 3, name: '待处理工艺', count: 0, correlationMenuName: 'technologySet', icon: 'el-icon-connection', bgColor: 'rgb(45, 140, 240)' },
                    { id: 4, name: '待开台', count: 0, correlationMenuName: 'productOpenCloseMachine', icon: 'el-icon-video-play', bgColor: 'rgb(255, 151, 14)' },
                    { id: 5, name: '待了机', count: 0, correlationMenuName: 'productOpenCloseMachine', icon: 'el-icon-video-pause', bgColor: 'rgb(55, 214, 226)' }
                ],
                shortList: [],
                todayData: {
                    todayProductNum: 0,
                    yesterdayProductNum: 0,
                    todayQty: 0,
                    yesterdayQty: 0,
                    todayElectricEnergy: 0,
                    yesterdayElectricEnergy: 0,
                    todayMachineNum: 0,
                    yesterdayMachineNum: 0,
                    toDayEmpNum: 0,
                    yesterdayEmpNum: 0
                }
            };
        },
        methods: {
            onWorkshopDropdownChange(e) {
                this.currentTime = formatTime(Date.now());
                const workshopItem = this.workshopList.find(x => x.id === e) || {};
                this.$set(this.searchParams, 'workshopId', workshopItem.id);
                this.$set(this.searchParams, 'workshopName', workshopItem.name);

                // 根据车间过滤工序
                this.processList = this.userProcess.processList.filter(x => x.workshopId === e);
                // 默认展示第一个工序
                const processItem = this.processList && this.processList.length ? this.processList[0] : {};
                this.$set(this.searchParams, 'processCode', processItem.code);
                this.$set(this.searchParams, 'processName', processItem.name);
                this.getTodayDataRequest();
            },
            onProcessDropdownChange(e) {
                this.currentTime = formatTime(Date.now());
                this.$set(this.searchParams, 'processCode', e);
                this.$set(this.searchParams, 'processName', e ? this.processList.find(x => x.code === e).name : '');
                this.getTodayDataRequest();
            },
            onConfirmOfNoticeItemDetailDialog() {
                this.noticeItemDetailDialogState = false;
                this.getNoticeMsgRequest();
            },
            onVisibleChangeOfNoticeItemDetailDialog(e) {
                this.noticeItemDetailDialogState = e;
            },
            onSeeNoticeItemBtn(e) {
                this.dataId = e.id;
                this.noticeItemDetailDialogState = true;
            },
            onSetShortcutKeysBtn() {
                this.customShortcutDialogState = true;
            },
            onConfirmBtnOfCustomShortcutDialog() {
                this.customShortcutDialogState = false;
                this.getShortListRequest();
            },
            onVisibleChangeOfCustomShortcutDialog(e) {
                this.customShortcutDialogState = e;
            },
            getNoticeMsgRequest() {
                return systemNoticeShow().then(res => {
                    if (res.data.status === 200) {
                        this.noticeTxt = res.data.res ? res.data.res.map(x => x.content).join(';') : '';
                        this.noticeList = res.data.res || [];
                    }
                });
            },
            // 获取待处理订单数量
            getPendingOrderCountRequest() {
                if (!this.searchParams.workshopId) return;
                return productionPrdOrderGetStateCount().then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || [];
                        let val = 0;
                        resData.forEach(x => {
                            if ([0, 1].includes(x.auditState)) {
                                val = mathJsAdd(x.count || 0, val);
                            }
                        });
                        this.toDoList.forEach(x => {
                            if (x.id === 1) {
                                this.$set(x, 'count', val);
                            }
                        });
                    }
                });
            },
            // 获取待处理生产通知单数量
            getPendingNoticeCountRequest() {
                if (!this.searchParams.workshopId) return;
                return productionPrdNoticeGetStateCount({
                    workshopId: this.searchParams.workshopId,
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || [];
                        let val = 0;
                        resData.forEach(x => {
                            if ([0, 1].includes(x.auditState)) {
                                val = mathJsAdd(x.count || 0, val);
                            }
                        });
                        this.toDoList.forEach(x => {
                            if (x.id === 2) {
                                this.$set(x, 'count', val);
                            }
                        });
                    }
                });
            },
            // 获取待处理工艺任务数量
            getPendingTecTaskCountRequest() {
                return productionTechnologySettingsGetStateCount({}).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || [];
                        resData.forEach(x => {
                            if (x.auditState === 0) {
                                this.toDoList.forEach(k => {
                                    if (k.id === 3) {
                                        this.$set(k, 'count', x.count);
                                    }
                                });
                            }
                        });
                    }
                });
            },
            // 获取待开台数量
            getPendingOpenCountRequest() {
                if (!this.searchParams.workshopId) return;
                return productionPrdNoticeMachineChangeGetStateCount({
                    workshopId: this.searchParams.workshopId,
                    processCodes: this.processList ? this.processList.map(x => x.code) : []
                }).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || [];
                        let val = 0;
                        resData.forEach(x => {
                            if ([0, 1, 2].includes(x.openingState)) {
                                val = mathJsAdd(x.count || 0, val);
                            }
                        });
                        this.toDoList.forEach(x => {
                            if (x.id === 4) {
                                this.$set(x, 'count', val);
                            }
                        });
                    }
                });
            },
            // 获取待了机数量
            getPendingCloseCountRequest() {
                if (!this.searchParams.workshopId) return;
                return productionPrdNoticeMachineChangeGetStateCount({
                    workshopId: this.searchParams.workshopId,
                    processCodes: this.processList ? this.processList.map(x => x.code) : []
                }).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || [];
                        let val = 0;
                        resData.forEach(x => {
                            if ([3].includes(x.openingState)) {
                                val = mathJsAdd(x.count || 0, val);
                            }
                        });
                        this.toDoList.forEach(x => {
                            if (x.id === 5) {
                                this.$set(x, 'count', val);
                            }
                        });
                    }
                });
            },
            // 获取快捷入口配置
            getShortListRequest() {
                return systemAuthGetCustomMenu().then(res => {
                    if (res.data.status === 200) {
                        this.shortList = res.data.res;
                    }
                });
            },
            getTodayDataRequest() {
                if (this.userProcess.defaultProcessCode) {
                    return stagingGetBelongData({
                        workshopId: this.searchParams.workshopId,
                        processCode: this.searchParams.processCode
                    }).then(res => {
                        if (res.data.status === 200) {
                            this.todayData = res.data.res || {};
                        }
                    });
                }
            },
            getDependentData() {
                this.getNoticeMsgRequest();
                this.getTodayDataRequest();
                this.getPendingOrderCountRequest();
                this.getPendingNoticeCountRequest();
                this.getPendingTecTaskCountRequest();
                this.getPendingOpenCountRequest();
                this.getPendingCloseCountRequest();
                this.getShortListRequest();
            }
        },
        mounted() {
            this.processList = this.userProcess.processList || [];
            this.workshopList = this.userWorkshop.workshopList || [];
            this.$set(this.searchParams, 'workshopId', this.userWorkshop.defaultWorkshopId);
            this.$set(this.searchParams, 'workshopName', this.userWorkshop.defaultWorkshopName);
            this.$set(this.searchParams, 'processCode', this.userProcess.defaultProcessCode);
            this.$set(this.searchParams, 'processName', this.userProcess.defaultProcessName);
            this.currentTime = formatTime(Date.now());
            this.getDependentData();
        }
    };
</script>

<style lang="scss" scoped>
    @import "./workbench";
</style>
